<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>邮箱格式验证示例</title>
</head>
<body>
<!--
pattern 属性：这里的正则表达式 ^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$ 用于验证简单的邮箱格式。

	- ^[a-zA-Z0-9._%+-]+ 匹配邮箱的用户名部分，允许字母、数字和常见的特殊字符。
	- @[a-zA-Z0-9.-]+ 匹配邮箱的域名部分。
	- \.[a-zA-Z]{2,}$ 匹配顶级域名，如 .com、.net 等，限制为至少两个字母。
	- title 属性：当用户输入格式不正确时，浏览器会显示 title 中的内容作为提示信息，例如 请输入有效的邮箱地址，例如：example@domain.com。


-->
<form action="/submit-form" method="post">
    <label for="email">邮箱:</label>
    <input type="text"
           id="email"
           name="email"
           placeholder="请输入邮箱"
           pattern="^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$"
           title="请输入有效的邮箱地址，例如：example@domain.com"
           required>
    <br><br>

    <input type="submit" value="提交">
</form>
</body>
</html>